<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="./favicon.ico" />
    <title>称重</title>
    <link rel="stylesheet" href="dist/styles/iview.css">
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
            position: relative;
        }
        
        .weigh-box,
        .speed-box {
            width: 100%;
            overflow: hidden;
        }
        
        .weigh-box>div,
        .speed-box>div {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="container">
        <Layout style="height:100%;">
            <i-Header>
                <Row style="height: 100%;">
                    <i-Col span="4" style="height: 100%;color: #ffffff">
                        <h1>称重</h1>
                    </i-Col>
                    <i-Col span="4" style="height: 100%;color: #ffffff">
                        <Row>
                            <i-Col span="8">
                                空载重量(千克) :
                            </i-Col>
                            <i-Col span="16" style="padding:0 10px 0 0;">
                                <i-input v-model.trim="deadweight"></i-input>
                            </i-Col>
                        </Row>
                    </i-Col>
                    <i-Col span="4" style="height: 100%;color: #ffffff">
                        <Row>
                            <i-Col span="6">
                                过滤(千克) :
                            </i-Col>
                            <i-Col span="18" style="padding:0 10px 0 0;">
                                <i-input v-model.trim="interval"></i-input>
                            </i-Col>
                        </Row>
                    </i-Col>
                    <i-Col span="4" style="padding: 0 10px;">
                        <i-button @click="getWeighingInfo" style="width:150px;">查询</i-button>
                    </i-Col>
                    <i-Col span="6" style="height: 100%;color: #ffffff;text-align: right;">
                        <h2>更新时间 : {{updateTimeStr}}</h2>
                    </i-Col>
                    <i-Col span="2" style="height: 100%;color: #ffffff;text-align: right;">
                        <i-button @click="fullScreen">全屏</i-button>
                    </i-Col>
                </Row>
            </i-Header>
            <i-Content :style="contentCls">
                <div class="weigh-box" :style="weighBoxStyle">
                    <div id="weigh-box"></div>
                </div>
                <div class="speed-box" :style="speedBoxStyle">
                    <div id="speed-box"></div>
                </div>
            </i-Content>
        </Layout>
    </div>
    <script src="js/polyfill.min.js"></script>
    <script src="dist/vue.min.js"></script>
    <script src="dist/iview.min.js"></script>
    <script src="js/gps51-jquery.js"></script>
    <script src="js/config.js"></script>
    <script src="js/dateformat.js"></script>
    <script src="js/js.cookie.min.js"></script>
    <script src="js/util.js"></script>
    <script src="js/echarts.min.js"></script>

    <script>
        var deviceid = utils.getParameterByName("deviceid");
        var token = utils.getParameterByName("token");

        var vRoot = new Vue({
            el: "#container",
            data: {
                weighChart: null,
                speedChart: null,
                contentHeight: 500,
                dateArr: [],
                weightArr: [],
                speedArr: [],
                fixedWeightArr: [],
                interval: 5,
                deadweight: 5000,
                isFullScreen: false,
            },
            methods: {
                getWeighChartOption: function() {
                    var option = {
                        title: {
                            text: '重量'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['重量', '修正重量']
                        },
                        grid: {
                            left: '3%',
                            right: '3%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: this.dateArr
                        },
                        yAxis: {
                            type: 'value',
                            min: function(value) {
                                return value.min - 10;
                            },
                            max: function(value) {
                                return value.max + 10;
                            }
                        },
                        series: [{
                            name: '重量',
                            type: 'line',
                            stack: '重量',
                            data: this.weightArr,
                            lineStyle: {
                                color: "red"
                            },
                            smooth: true
                        }, {
                            name: '修正重量',
                            type: 'line',
                            stack: '修正重量',
                            data: this.fixedWeightArr,
                            lineStyle: {
                                color: "green"
                            },
                            smooth: true
                        }]
                    };
                    return option;
                },
                getSpeedChartOption: function() {
                    var option = {
                        title: {
                            text: '速度'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['速度']
                        },
                        grid: {
                            left: '3%',
                            right: '3%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: this.dateArr
                        },
                        yAxis: {
                            type: 'value',
                        },
                        series: [{
                            name: '速度',
                            type: 'line',
                            stack: '总量',
                            data: this.speedArr,
                            smooth: true

                        }]
                    };
                    return option;
                },
                fullScreen: function() {
                    this.isFullScreen = !this.isFullScreen;
                    var me = this;
                    setTimeout(function() {
                        me.weighChart.resize();
                        me.speedChart.resize();
                    }, 500)
                },
                setContentHeight: function() {
                    var wHeight = document.documentElement.clientHeight || document.body.clientHeight;
                    this.contentHeight = wHeight - 64;
                },
                getWeighingInfo: function() {
                    var url = myUrls.queryWeightDynamic(),
                        me = this;
                    var date = new Date();
                    var year = date.getFullYear();
                    var month = date.getMonth() + 1;
                    var day = date.getDate();
                    var dateStr = year + "-" + (month < 10 ? '0' + month : month) + "-" + (day < 10 ? '0' + day : day);
                    var startTimeStr = dateStr + " 00:00:00";
                    var endTimeStr = dateStr + " 23:59:00";
                    if (isNaN(Number(this.interval))) {
                        this.$Message.error("过滤,请填入数字");
                        return;
                    }
                    if (isNaN(Number(this.deadweight))) {
                        this.$Message.error("低重,请填入数字");
                        return;
                    }
                    var data = {
                        deviceid: deviceid,
                        begintime: startTimeStr,
                        endtime: endTimeStr,
                        timezone: 8,
                        interval: this.interval,
                        deadweight: this.deadweight,
                    }
                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status === 0) {

                            var records = resp.records,
                                dateArr = [],
                                weightArr = [],
                                speedArr = [],
                                fixedWeightArr = [];
                            if (!records && records.length) {
                                me.$Message.success("没有数据");
                                return;
                            }
                            records.forEach(function(record) {
                                dateArr.push(DateFormat.longToLocalDateTimeStr(record.updatetime));
                                weightArr.push(record.weight);
                                speedArr.push(record.speed);
                                fixedWeightArr.push(record.fixedweight);
                            });

                            me.dateArr = dateArr;
                            me.weightArr = weightArr;
                            me.speedArr = speedArr;
                            me.fixedWeightArr = fixedWeightArr;
                            me.weighChart.setOption(me.getWeighChartOption(), true);
                            me.speedChart.setOption(me.getSpeedChartOption(), true);
                            me.$Message.success("查询成功");
                        } else {
                            me.$Message.error("查询失败");
                        }
                    })
                },

            },
            computed: {
                contentCls: function() {
                    return {
                        height: this.contentHeight + 'px'
                    }
                },
                weighBoxStyle: function() {
                    return {
                        height: this.isFullScreen ? '100%' : '50%'
                    }
                },
                speedBoxStyle: function() {
                    return {
                        height: this.isFullScreen ? '0' : '50%'
                    }
                },
                updateTimeStr: function() {
                    var dateArr = this.dateArr,
                        len = this.dateArr.length;
                    return dateArr[len - 1] ? dateArr[len - 1] : '';
                }
            },
            mounted: function() {
                var vm = this;
                vm.$nextTick(function() {
                    vm.weighChart = echarts.init(document.getElementById('weigh-box'));
                    vm.speedChart = echarts.init(document.getElementById('speed-box'));
                    vm.weighChart.setOption(vm.getWeighChartOption(), true);
                    vm.speedChart.setOption(vm.getSpeedChartOption(), true);
                    vm.setContentHeight();
                    vm.getWeighingInfo();
                });
                window.onresize = function() {
                    vm.setContentHeight();
                    vm.weighChart.resize();
                    vm.speedChart.resize();
                }
            },
        })
    </script>
</body>

</html>